'use strict';

import React from 'react';
import {
    View,
    StyleSheet,
    Image,
    Text,
    Dimensions,
    TouchableOpacity
} from 'react-native';
import AllCommentPage from '../Pages/AllCommentPage';
import Toast from '../Utils/toast';
import CommentItemView from '../Components/CommentItemView';

const window = Dimensions.get('window');

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    avatar: {
        width: 40,
        height: 40,
        marginRight: 5,
    },
    name: {
        flex: 1,
    },
    date: {
        textAlign: 'right',
        color: 'black',
    },
    rowContent: {
        flexDirection: 'row',
        alignItems: 'center',
        padding: 10,
    },
    whoCame: {
        width: window.width,
        textAlignVertical: 'center',
        borderColor: '#F2F3F5',
        borderBottomWidth: 1,
        textAlign: 'center',
        padding: 10,
        backgroundColor: 'white',
    },
});

class CommentList extends React.Component {

    showAllComment() {
        let commentList = this.props.commentList;
        let id = this.props.id;
        let type = this.props.type;
        this.props.navigator.push({
            name: 'AllCommentPage',
            component: AllCommentPage,
            passProps: {
                commentList,
                id: id,
                type: type,
            }
        })
    }

    render() {
        let {commentList, showTop} = this.props;
        return (

            <View style={styles.container}>
                {commentList.length > 0 ? <View style={styles.container}>
                    {
                        showTop ?
                            <View style={{
                            flexDirection: 'row',
                            alignItems: 'center',
                            padding: 10,
                            paddingLeft: 15,
                            backgroundColor: 'white',
                        }}>
                                <Image style={{width: 15,height: 15,marginRight: 10,resizeMode: 'contain'}}
                                       source={require('../../Image/icon_gray_comment.png')}
                                />
                                <Text style={{color: '#333', fontSize: 16}}>点评</Text>
                            </View> : null
                    }

                    {   commentList ?
                        commentList.map((item, index) => {
                            if (index >= 3) {
                                return
                            }
                            return (
                                <View key={'comment' + index} style={{flex: 1 }}>
                                    <CommentItemView numberOfLines={3} item={item} navigator={this.props.navigator}/>
                                </View>
                            )
                        }) : null
                    }
                    <TouchableOpacity onPress={() => this.showAllComment()}>
                        <View style={{
                        flexDirection: 'row',
                        alignItems: 'center',
                        justifyContent: 'center',
                        padding: 10,
                    }}>
                            <Text style={{
                            color: '#38D68B',
                            fontSize: 16
                        }}>
                                查看全部评论
                            </Text>
                            <Image style={{width: 15, height: 15, marginLeft: 5,marginTop: 2, resizeMode: 'contain'}}
                                   source={require('../../Image/icon_green_arrow.png')}
                            />
                        </View>
                    </TouchableOpacity>
                </View> : null}
            </View>
        )
    }
}

export default CommentList;